import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, } from 'antd'
import { SearchResult } from '../../components/yun_ying/SearchResult'

function degree(degree) {
    return degree / 180 * Math.PI;
}
async function draw() {//坐标变换
    let img_width = 0;
    let img_height = 0;
    var canvas = document.getElementById("yun_ying_map");
    var canvasWidth = 1440;
    var canvasHeight = 800;
    var c = canvas.getContext("2d");
    c.beginPath();
    // c.fillStyle = "white";
    // c.fillRect(0, 0, canvasWidth, canvasHeight);
    //没有转换之前的代码写在这里
    let img = new Image();
    img.src = require('../../assets/img/yun_ying/structor_map.jpg')
    await new Promise((resolve, reject) => {
        img.onload = function () {
            img_width = img.width
            img_height = img.height
            c.drawImage(img, 0, 0, 1440, 800)
            c.stroke();
            resolve('ok');
        }
    })
    // 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向
    c.save();
    c.translate(0, canvasHeight);
    c.rotate(degree(180));
    c.scale(-1, 1);
    //坐标转换完成
    c.beginPath();
    c.restore();
}
async function drawSome(x, y) {
    await draw()
    console.log('执行了画图')
    var canvas = document.getElementById("yun_ying_map");
    var canvasHeight = 800;
    var c = canvas.getContext("2d");
    c.beginPath();
    //没有转换之前的代码写在这里
    c.stroke()
    c.save();
    // 进行坐标变换：把原点放在左下角，东方为X轴正向，北方为Y轴正向
    c.save();
    c.translate(0, canvasHeight);
    c.rotate(degree(180));
    c.scale(-1, 1);
    //坐标转换完成
    c.beginPath();
    c.fillStyle = 'red'
    c.arc(x, y, 10, 0, 2 * Math.PI);
    c.fill()
    c.closePath()
    c.restore();
}
function clearArc(x, y, r, cxt) {    //(x,y)为要清除的圆的圆心，r为半径，cxt为context
    var stepClear = 1;//别忘记这一步  
    clearArc(x, y, r);
    function clearArc(x, y, radius) {
        var calcWidth = radius - stepClear;
        var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);

        var posX = x - calcWidth;
        var posY = y - calcHeight;

        var widthX = 2 * calcWidth;
        var heightY = 2 * calcHeight;

        if (stepClear <= radius) {
            cxt.clearRect(posX, posY, widthX, heightY);
            stepClear += 1;
            clearArc(x, y, radius);
        }
    }
}
@observer
export default class Right_part extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] }

    }
    componentDidMount = async () => {
        await draw()
        let that = this
        WebSocketTest()
        function WebSocketTest() {
            if ("WebSocket" in window) {
                console.log("您的浏览器支持 WebSocket!");
                // 打开一个 web socket
                var ws = new WebSocket("ws://192.168.1.102:32404/yunli-ai/passerby");
                ws.onopen = function () {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    console.log("人体轨迹数据发送中...")
                    ws.send("发送数据");
                };
                ws.onmessage = function (evt) {
                    var received_msg = evt.data;
                    received_msg = JSON.parse(received_msg)
                    // console.log('json格式是', received_msg)
                    that.setState((prevState) => ({
                        data: received_msg
                    }), () => {
                        if (that.state.data != 'open connect success' && that.state.data != 'ok') {
                            drawSome(that.state.data.geo.x / (4150 / 1440), that.state.data.geo.y / (2000 / 800))
                        }
                    })
                };
                ws.onclose = function () {
                    // 关闭 websocket
                    console.log("websocket人体轨迹连接已关闭...");
                };
            }
            else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }

    }

    render() {
        return (
            <React.Fragment>

                <canvas id="yun_ying_map" width="1440px" height="800px" >
                    您的浏览器不支持 HTML5 canvas 标签。
             </canvas>
                <SearchResult />
            </React.Fragment>
        );
    }
}

